Vue.component('top-form', {
    template: `
        <el-form :inline="true" size="mini" class="" ref="tableSearch">
            <el-row>
                <el-col :span="21">
                    <el-form-item v-for="(item, index) in searchbox" :label="item.title">
                        <!-- 文本框 -->
                        <el-input 
                            v-if="item.type == 'text'" 
                            v-model="item.value" 
                             @change="(val)=>apiChangeInputFocus(val,item)" 
                            size="mini" 
                            :name="item.field" 
                            :prefix-icon="item.icon" 
                            :placeholder="item.dec"
                            :disabled="isedit"
                            >
                        </el-input>
                        
                        <!-- 日期框 -->
                        <el-date-picker 
                            v-if="item.type == 'date'" 
                             @change="(val)=>apiChangeInputFocus(val,item)" 
                            value-format="yyyy-MM-dd" 
                            format="yyyy-MM-dd" 
                            :name="item.field" 
                            v-model="item.value" 
                            :placeholder="item.dec"
                            :disabled="isedit"
                        >
                        </el-date-picker>
                        
                        <!-- 日期范围框 -->
                        <el-date-picker
                            v-if="item.type == 'daterange'" 
                            v-model="item.value"
                            @change="(val)=>apiChangeInputFocus(val,item)" 
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" 
                            format="yyyy-MM-dd"
                            :disabled="isedit"
                        >
                        </el-date-picker>

                        <!-- 多选框 -->
                        <el-checkbox-group :disabled="isedit" @change="(val)=>apiChangeInputFocus(val,item)" v-if="item.type == 'checkbox'" v-model="item.value">
                            <el-checkbox v-for="item2 in item.option" :value="item2.value" :label="item2.value">{{item2.label}}</el-checkbox>
                        </el-checkbox-group>

                        <!-- 固定选择 -->
                        <el-select filterable :disabled="isedit" @change="(val)=>apiChangeInputFocus(val,item)" v-if="item.type == 'select'" size="mini" v-model="item.value" >
                            <el-option v-for="item3 in item.option" :key="item3.value" :label="item3.label" :value="item3.value">
                            </el-option>
                        </el-select>

                        <el-popover
                            v-if="item.type == 'select_api'" 
                            placement="bottom-start"
                            :width="item.optionBoxWidth ? item.optionBoxWidth : 400"
                            trigger="click" 
                            :disabled="isedit"
                        >  
                            <el-table @row-click="(row,column,e)=>apiPopoverTableRowClick(row,column,e,item)" :data="myData(item)" size="mini" height="200" >
                                <el-table-column v-for="item8 in item.optionTableRole" :width="item8.width" :fixed="item8.fixed" :label="item8.title" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <div v-for="(item2,index8) in scope.row" >
                                            <template  v-if="index8 == item8.field">
                                                <span>{{scope.row[index8]}}</span>
                                            </template>
                                        </div>
                                    </template>    
                                </el-table-column>
                            </el-table>
                            <el-input 
                                :disabled="isedit"
                                @focus="apiSelectInputFocus($event,item)" 
                                @change="(val)=>apiChangeInputFocus(val,item)" 
                                v-model="item.value"  
                                slot="reference" 
                                size="mini" 
                                placeholder="请点击选择"
                            ></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <div style="padding-top:20px">
                        <el-button @click="submitForm" :disabled="isedit" type="warning" size="mini" plain>搜索</el-button>
                        <el-button size="mini" :disabled="isedit" plain>重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        
    `,
    props: {
        searchbox: {
            type: Array,
            default: () => { return [] }
        },
        defaultpramas:{
            type: Object,
            default: () => { return {} }
        },
        isedit:{
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            searchData:{},
        };
    },
    computed:{
        myData() {
            return function(role) {
                let data = role.option;
                let val = role.value;

                if (val && val !== '') {
                    return data.filter((item, i, arr) => {
                        return item[role.filtefield].includes(val)
                    })
                } else {
                    return data;
                }
            };
        },
    },
    methods: {

        //内 表格 被点击
        apiPopoverTableRowClick(row, column, e,role) {
            console.log(role,'role');
            let feilds = this.scoperow;
            let _this = this;
            let tableRole = role.optionTableRole;

            this.clearInsertField(role); //清除之前的数据

            tableRole.forEach(function(obj) {
                if (obj.toInsert) { //普通带出
                    console.log(obj.toInsert);
                   _this.searchData[obj.toInsert] = row[obj.field] ;
                }
            })
            role.value = row[role.showfield];

            //添加全局检索参数
            if( role.hasOwnProperty('insert_deafault_field')){

                let arr = Object.entries(role.insert_deafault_field);
                 console.log(arr,'arr');
                arr.forEach(function(item2){
                    _this.$set(_this.defaultpramas, item2[0], row[item2[1]]);
                })

            }
        },
        /*
            input 获得焦点 -- 是否需要额外处理
            e       input对象
            role    规则对象
            feilds  本行数据row
        */
        apiSelectInputFocus(e,role) {
            //启动表格
            let feilds = this.searchData;
            //判断是否是关联数据的下级
            if (role.parentField) {

                let params = {
                    action: role.action,
                    pagesize: 200,
                    page: 1
                };

                let where = [];

                role.parentField.forEach(function(item) {
                    let pfield = feilds[item[0]]; //数据字段值
                    where.push([item[1], '=', pfield]);
                })

                if (where.length > 0) {
                    params.extra_where = where;
                    console.log(params, 'params');
                    request(params, function(resalt) {
                        var data = resalt.data.list.data;
                        if (data) {
                            role.option = data;
                        }
                    });
                }
            }
        },
        /*
           input 变化 -- 内容是否符合规则
           val     值
           role    规则对象
           feilds  本行数据row
       */
        apiChangeInputFocus(val,role) {
            let feilds = this.searchData;
            let _this = this;
            if(role.type === 'select_api'){
                if (val !== '') {
                    let arr = role.option;
                    if (!arr.find(v => v[role.showfield] === val)) {
                        this.$message.error('您输入的信息,不符规则!');
                        //清空对应 带入字段的值
                        this.clearInsertField(role);
                        this.$set(role, 'value', '');
                    }
                } else {
                    this.$set(role, 'value', '');
                    this.clearInsertField(role);
                }
            }else{
                feilds[role.field] = val;
            }
        },
        //辅助
        //清空对应 带入字段的值
        clearInsertField(role) {
            let feilds = this.searchData;
            let _this = this;
            if (role.optionTableRole) {
                role.optionTableRole.forEach(function(item) {
                    if (item.toInsert && item.toInsert !== '') {
                        delete feilds[item.toInsert]
                    }
                })
            }
            if (role.clearfield) {
                role.clearfield.forEach(function(item) {
                    delete feilds[item.toInsert]
                })
            }
        },

        //提交筛选数据
        submitForm() {

            let sdata = clone(this.searchData);
            console.log(sdata);
            this.$parent.setsearchboxcachedata(sdata);
            //
            this.$parent.tablesearch();
        },


    }
})
